<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .checkgroup .item {
        height: 42px;
        line-height: 42px;
        padding: 0 10px;
        margin: 10px 0;
        border: 1px solid #c7c7c7;
        border-radius: 6px;
      }
      .checkgroup.radius .item {
        border-radius: 21px;
      }
      .checkgroup .item.selected {
        border: 1px solid #08b292;
        background: #08b292;
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <div id="jsCheckGroup">
      <div class="checkgroup radius">
        <div data-val="a" class="item selected">选项a</div>
        <div data-val="b" class="item">选项b</div>
        <div data-val="c" class="item">选项c</div>
        <div data-val="d" class="item">选项d</div>
      </div>
    </div>
    <script type="text/javascript">
      /**看着有点吓人，思路倒也不复杂，跟着注释提示要求写的，遇到问题加if，
       * 主打一个缝缝补补能过了，没啥好讲的，小友花点时间理顺一下思路就行了
       */
      function CheckGroup(renderTo, options, isMultiple) {
        var that = this;
        that.renderTo = renderTo;
        that.options = options;
        that.isMultiple = !!isMultiple;
        that.initHtml();
        that.initEvent();
      }
      CheckGroup.prototype.initHtml = fInitHtml;
      CheckGroup.prototype.initEvent = fInitEvent;
      CheckGroup.prototype.toggleEl = fToggleEl;
      CheckGroup.prototype.isSelected = fIsSelected;
      CheckGroup.prototype.val = fVal;

      function fInitHtml() {
        var that = this;
        // 请补全代码，拼接html字符串
        var sHtml = "";

        sHtml = `<div class="checkgroup ${that.isMultiple ? "" : "radius"}">
               ${that.options
                 .map(function (item) {
                   return `<div data-val="${item.value}" class="item">${item.text}</div>`;
                 })
                 .join("")}</div>`;
        that.renderTo.innerHTML = sHtml;
        // 请补全代码，获取checkgroup的dom元素引用
        that.el = null;
        that.el = that.renderTo.querySelector(".checkgroup");
      }

      function fInitEvent() {
        var that = this;
        that.el &&
          that.el.addEventListener("click", function (event) {
            var item = event.target;
            item.classList.contains("item") && that.toggleEl(item);
          });
      }

      function fToggleEl(item) {
        // 根据当前是单选还是多选，以及当前元素是否选中，高亮/取消���亮指定的选项dom元素
        var that = this;
        if (that.isSelected(item)) {
          // 请补全代码
          item.classList.remove("selected");
        } else if (that.isMultiple) {
          // 请补全代码
          item.classList.add("selected");
        } else {
          // 请补全代码
          if (item.parentNode.querySelector(".selected")) {
            item.parentNode
              .querySelector(".selected")
              .classList.remove("selected");
          }
          item.classList.add("selected");
        }
      }

      function fIsSelected(item) {
        // 请补全代码，判断item是否选中
        if (item.classList) {
          item = item.classList.contains("selected");
        } else {
          return false;
        }
        return item;
      }

      function fVal(values) {
        var that = this;
        if (arguments.length === 0) {
          // 请补全代码，获取高亮的选项元素
          var items = null;
          items = that.renderTo.querySelectorAll(".selected");
          // 请补全代码，获取高亮的选项元素的data-val
          var result = [];
          result = [].slice.call(items).map(function (item) {
            return item.getAttribute("data-val");
          });
          return result;
        }
        !that.isMultiple && values.length > 1 && (values.length = 1);
        // 请补全代码，获取所有的选项元素
        var items = null;
        items = that.renderTo.querySelectorAll(".item");
        // 请补全代码，在指定元素上加上高亮的class
        for (var i = 0; i < items.length; i++) {
          let keyText = `.item[data-val="${values[i]}"]`;
          let dom = that.renderTo.querySelector(keyText);
          if (dom) that.toggleEl(dom);
        }
      }

      // 测试
      //   var options = [
      //     { text: "选项a", value: "a" },
      //     { text: "选项b", value: "b" },
      //     { text: "选项c", value: "c" },
      //     { text: "选项d", value: "d" },
      //   ];
      //   var item = new CheckGroup(
      //     document.getElementById("jsCheckGroup"),
      //     options,
      //     true
      //   );
      //   item.val(["a"]);
    </script>
  </body>
</html>
